<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<title>首页</title>
<link type="text/css" rel="stylesheet" href="assets/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="assets/css/style.css"> 
<style type="text/css">
a{color:#337ab7 !important;}
.tags{float:left;margin-bottom: 20px;}
</style>
</head>
<body>
<div class="container login_box" style="padding:0 2%;"> 
<%@ include file="headPage.jsp"%>
<div style="margin:20px 0;font-size:14px;">
<shiro:user><span><img id="userP" width="50" height="50" src=""></span>欢迎！<span id="userN"><shiro:principal/></span><a href="center" style="margin:0 20px;">个人中心</a><button id="logOut">退出</button></shiro:user>
<shiro:guest>
<h2 style="margin:10px 0;">欢迎，请先<a href="login">登录/注册</a></h2>
<h4>或者我先给个账号你：555跟555</h4>
</shiro:guest>
</div>
<shiro:user>
	<div id="content">
		<h3>标签分类：</h3>
		<div class="tags"></div>
		<h3 style="clear:both;margin-top:20px;">博客列表</h3>
		<table id="blogs" style="width:100%">
			<tr><th width="20%">标签</th><th width="50%">标题</th><th width="20%">发表时间</th></tr>
		</table>
	</div>
</shiro:user>
</div>
<script type="text/javascript" src="assets/scripts/jquery-1.11.2.min.js"></script>
<script>
	$(document).ready(function(){
		var $page = 1;
		var $pageSize = 5;
		var $total;
		var $pageTotal;
		var $nowPage = 1;
		
		
		$("#logOut").click(function(){ 
			$.get("logout",function(data){
				if(data.res == true){
					alert("退出成功！");
					location.reload();
				}
			})
		})
		
		$.get("getTags",function(data){
			for(var i=0;i<data.length;i++){
				var $a = $("<a href='list?tagName=" + data[i].tagName + "'>" + data[i].tagName + "(" + data[i].total + ")</a>");
				$(".tags").append($a);
			}
		});
		$.get("getUser",function(data){
			$("#userN").html(data.name);
			$("#userP").attr("src",data.pic);
		});
		

		getBlogs();
		
		function getBlogs(tag){
			var $tag = tag;
			if(!$tag){
				$tag = null;
			}
			$.ajax({
				type:"post",
				url:"getBolgs",
				dataType:"json",
				data:{
					"rqpage":$page,
					"rqtag":$tag
				},
				success:function(data){
					$("#blogs tr").filter(function(){return $(this).index() > 0}).remove();
					for(var i=0;i<data.length;i++){
						var $pT = (data[i].publishT).split(" ")[0];
						var $a = $pT.split("-");
						$pT = $a[1] + "-" + $a[2];
						var $tr = $("<tr>" 
								+ "<td><span>" + data[i].tag + "</span></td><td><a href='content?blogId=" + data[i].id +  "'>" + data[i].title + "</a></td>"
								+ "<td><em>" + $pT +"</em></td>"
								+ "</tr>");
						$("#blogs").append($tr);
					}
				}
			})
		}
		//分页====================================
		//获取总页码
		$.get("getallblogtotal",function(data){
			$total = data;
			$pageTotal = Math.ceil($total / $pageSize);
			$pageBox = $("<div id='pageBox'></div>");
			$firstPage = $("<a href='javascript:void(0);' data-page='1'>首页</a>");
			$lastPage = $("<a href='javascript:void(0);' data-page='" + $pageTotal + "'>尾页</a>");
			$prevPage = $("<a href='javascript:void(0);' id='prev'>上一页</a>");
			$nextPage = $("<a href='javascript:void(0);' id='next'>下一页</a>");
			$pageNumber = $("<p class='pageNumber'></p>")
			$pageBox.append($firstPage);
			$pageBox.append($prevPage);
			$pageBox.append($pageNumber);
			$pageBox.append($nextPage);
			$pageBox.append($lastPage);
			$("#content").append($pageBox);
			if($pageTotal <= 5){
				$pageNumber.append(lessPageN($pageTotal)); 
			}else{
				$pageNumber.append(defaultPageN()); 
			}
		})
		//页码点击改变页数，改变样式
		$(".container").on("click","#pageBox a",function(){
			var $thisPage = $(this).attr("data-page");
			var $thisHtml = $(this).html();
			
			if(!$thisPage){
				if($thisHtml == "上一页" && $page > 1){
					$page--;
					getBlogs();
				}else if($thisHtml == "下一页" && $page < $pageTotal){
					$page++;
					getBlogs();
				}else{
					return;
				}
			}else{
				$page = $thisPage;
				getBlogs();
			}
			//小于等于展示页数时
			if($pageTotal <= 5){
				$(".pageNumber span").remove();
				$pageNumber.append(lessPageN($pageTotal));
			}else{//大于展示页数时
				//刚好6页时
				if($pageTotal == 6){
					//page<4时
					if($page < 4){
						$(".pageNumber a").remove();
						$pageNumber.append(defaultPageN()); 
					}else{
						$(".pageNumber a").remove();
						$pageNumber.append(sixPageN()); 
					}
				}
				//大于6页时
				if($pageTotal > 6){
					//page<4时
					if($page < 4){
						$(".pageNumber a").remove();
						$pageNumber.append(defaultPageN()); 
					}else if($page >= 4 && $page <= $pageTotal - 2){
						$(".pageNumber a").remove();
						$pageNumber.append(middlePageN($page)); 
					}else{
						$(".pageNumber a").remove();
						$pageNumber.append(lastPageN()); 
					}
				}
			}
			//点击样式
			pageStyle();
		});
		//小于等于5页
		function lessPageN(pageTotal){
			var $span = $("<span></span>");
			var $as;
			for(var i=1;i<=pageTotal;i++){
				if(i == 1){
					$as = $("<a href='javascript:void(0);' class='active' data-page='" + i + "'>" + i + "</a>");
				}else{
					$as = $("<a href='javascript:void(0);' data-page='" + i + "'>" + i + "</a>");
				}
				$span.append($as);
			}
			return $span;
		}
		//大于5页
		//等于6页尾几页
		function sixPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
					+ "<a href='javascript:void(0);' data-page='6'>6</a>"
			);
			return $as;
		}
		//初始页码
		function defaultPageN(){
			var $as = $("<a href='javascript:void(0);' class='active' data-page='1'>1</a>"
					+ "<a href='javascript:void(0);' data-page='2'>2</a>"
					+ "<a href='javascript:void(0);' data-page='3'>3</a>"
					+ "<a href='javascript:void(0);' data-page='4'>4</a>"
					+ "<a href='javascript:void(0);' data-page='5'>5</a>"
			);
			return $as;
		}
		//中间的页码
		function middlePageN(page){
			var $mPage = parseInt(page);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($mPage-2) + "'>" + ($mPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage-1) + "'>" + ($mPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $mPage + "'>" + $mPage + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+1) + "'>" + ($mPage+1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($mPage+2) + "'>" + ($mPage+2) + "</a>"
			);
			return $as;
		}
		//最后的页码
		function lastPageN(){
			var $lastPage = parseInt($pageTotal);
			var $as = $("<a href='javascript:void(0);' data-page='" + ($lastPage-4) + "'>" + ($lastPage-4) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-3) + "'>" + ($lastPage-3) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-2) + "'>" + ($lastPage-2) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + ($lastPage-1) + "'>" + ($lastPage-1) + "</a>"
					+ "<a href='javascript:void(0);' data-page='" + $lastPage + "'>" + $lastPage + "</a>"
			);
			return $as;
		}
		//点击页码样式
		function pageStyle(){
			$("#pageBox a").removeClass("active");
			$(".pageNumber a").filter(function(){
				if($(this).html() ==$page){
					$(this).addClass("active");
				}
			});
		}
		//分页====================================
	});
</script>
</body>
</html>
